<template>
  <dv-charts :option="option" />
</template>

<script>
import { getLinesdata } from "@/assets/api/api.js";
export default {
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      timer: null,
      data: {},
      conf: {
        title: {
          text: "",
        },
        grid: {
          top: 80,
          bottom: 100,
        },
        legend: {
          top: 50,
          data: [
            {
              name: "清算量",
              color: "rgb(45,187,250, 1)",
            },
            {
              name: "结算量",
              color: "rgba(105,255,78, 1)",
            },
          ],
          textStyle: {
            fontFamily: "Arial",
            fontSize: 22,
            fill: "#3b95d2",
          },
        },
        xAxis: {
          data: [],
          axisLine: {
            style: {
              stroke: "#3b95d2",
              lineWidth: 1,
            },
          },
          axisLabel: {
            style: {
              fill: "#3b95d2",
              fontSize: 20,
              rotate: 0,
            },
          },
        },
        yAxis: {
          min: 0,
          splitLine: {
            show: false,
          },
          name: "",
          data: "value",
          axisLine: {
            style: {
              stroke: "#3b95d2",
              lineWidth: 1,
            },
          },
          axisLabel: {
            style: {
              fill: "#3b95d2",
              fontSize: 20,
              rotate: 0,
            },
          },
        },
        series: [
          {
            name: "清算量",
            data: [],
            type: "line",
            smooth: false,
            lineArea: {
              show: true,
              gradient: ["rgba(45,187,250, 1)", "rgba(45,187,250, 0)"],
            },
            lineStyle: {
              stroke: "rgba(45,187,250, 1)",
              lineWidth: 4,
            },
            linePoint: {
              // style: {
              //   fill: "rgba(45,187,250, 1)",
              // },
              radius: 4,
            },

            yAxisIndex: 0,
          },
          {
            name: "结算量",
            data: [],
            type: "line",
            smooth: false,
            lineArea: {
              show: true,
              gradient: ["rgba(105,255,78, 1)", "rgba(105,255,78, 0)"],
            },
            lineStyle: {
              stroke: "rgba(105,255,78, 1)",
              lineWidth: 4,
            },
            linePoint: {
              // style: {
              //   fill: "rgba(105,255,78, 1)",
              // },
              radius: 4,
            },
          },
          {
            name: "销售额",
            data: [],
            type: "bar",
            barWidth: 49,
            gradient: {
              color: ["rgba(45,187,250, .1)", "rgba(103, 224, 227, .1)"],
            },
            backgroundBar: {
              show: true,
              width: 49,
              style: {
                // fill: 'rgba(45,187,250, .1)'
                fill: "#2dbbfa",
                opacity: 0.1,
              },
            },
          },
        ],
      },
    };
  },
  created() {
    let data = {
      time: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      value: {
        s1: [1500, 1700, 1400, 2500, 1400, 2700, 1500],
        s2: [3500, 700, 1400, 2000, 1400, 700, 1500],
      },
    };
    this.data = data;
    this.fetchData();
    this.timer = setInterval(() => {
      this.fetchData();
    }, this.schedule);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    fetchData() {
      getLinesdata().then((res) => {
        this.data = res.data.result;
      });
    },
  },
  computed: {
    option() {
      let data = this.data || {};
      let opt = JSON.parse(JSON.stringify(this.conf));
      opt.xAxis.data = data.time || [];
      opt.series[0].data = (data.value && data.value.s1) || [];
      opt.series[1].data = (data.value && data.value.s2) || [];
      return opt;
    },
  },
};
</script>

<style lang="less" scoped></style>
